<template>
  <div class="edit">
    <el-dialog
      v-model="isShow"
      :title="props.id === 0 ? '添加活动' : '编辑活动'"
      width="40%"
      @close="closeFn"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="添加时间段名称:">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="开始时间:">
          <el-date-picker
            v-model="form.startDate"
            type="date"
            placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item label="结束时间:">
          <el-date-picker
            v-model="form.endDate"
            type="date"
            placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item label="上线/下线">
          <el-radio-group v-model="form.status" class="ml-4">
            <el-radio :label="1" size="large">上线</el-radio>
            <el-radio :label="0" size="large">下线</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="emit('close')">取消</el-button>
          <el-button type="primary" @click="subFn"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref, watch } from "vue";
import { getFlashIdApi, addFlashListApi, editFlashListApi } from "../api";

// 传进来的方法
const emit = defineEmits(["close", "updateList"]);

// 传进来的数据
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  // id为0时添加，否则就编辑
  id: {
    type: Number,
    default: 0,
  },
});

const form = reactive<IEditFlashList>({
  title: "",
  endDate: "",
  startDate: "",
  status: 0,
});

// 显示和隐藏
const isShow = ref<boolean>(false);
const editId = ref<number>(0);

// 监听id变化如果id不为0就是编辑，根据id发请求获取编辑的数据
watch(
  () => props.id,
  () => {
    editId.value = props.id;

    if (props.id === 0) return;
    getFlashIdApi(props.id).then((res) => {
      if (res.code === 200) {
        // 合并
        Object.assign(form, res.data);
      }
    });
  }
);
// 监听show的变化来控制弹出框是显示隐藏，用immediate初始化之后立即调用
watch(
  () => props.show,
  () => {
    isShow.value = props.show;
  },
  {
    immediate: true,
  }
);

// 点击曲儿
const subFn = () => {
  // id为0时添加，否则就编辑
  if (props.id === 0) {
    ElMessageBox.confirm("是否确认添加", "添加", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      form.endDate = new Date(form.endDate).toISOString();
      form.startDate = new Date(form.startDate).toISOString();
      addFlashListApi(form).then((res) => {
        if (res.code === 200) {
          ElMessage.success("添加成功");
          emit("close");
          // 刷新列表
          emit("updateList");
        }
      });
    });
  } else {
    ElMessageBox.confirm("是否确认编辑", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      editFlashListApi(form).then((res) => {
        if (res.code === 200) {
          ElMessage.success("修改成功");
          emit("close");
          // 刷新列表
          emit("updateList");
        }
      });
    });
  }
};

// 关闭弹出框数据恢复默认
const closeFn = () => {
  emit("close");
  editId.value = 0;
  form.title = "";
  form.startDate = "";
  form.endDate = "";
  form.status = 1;
};
</script>

<style scoped lang="less">
.edit {
  :deep(.el-form-item__label) {
    height: 40px;
    line-height: 40px;
  }

  :deep(.el-form-item__content) {
    flex: none;
    width: 50%;
  }
  :deep(.el-input__wrapper) {
    width: 80%;
  }
}
</style>
